<template>
    <footer class="footer">
        <section class="box">
            <div class="footer-left">
                <a class="logo"
                    href="/"
                    target="_top"
                    title="返回顶部">
                    <img class="img"
                        src="https://oss.boweixi.com/prod/bwx/logo.png"
                        alt="logo"
                        loading="lazy">
                </a>
            </div>
            <nav class="footer-right">
                <ul class="ul">
                    <li>
                        <a>关于我们</a>
                    </li>
                    <li>
                        <a class="link"
                            href="/about"
                            title="关于我们">关于我们</a>
                    </li>
                    <!-- <li>
                        <a class="link"
                            href="/contact"
                            title="联系我们">联系我们</a>
                    </li> -->
                    <li>
                        <a class="link"
                            href="/terms"
                            title="用户注册与服务协议">用户注册与服务协议</a>
                    </li>
                    <li>
                        <a class="link"
                            href="/policy"
                            title="免责声明">免责声明</a>
                    </li>
                </ul>

                <ul class="ul">
                    <li>
                        <a>联系客服</a>
                    </li>
                    <li>
                        <div class="qrcode-tg">
                            <img src="https://oss.petslib.cn/prod/static/pc/imgs/wx-kefu.jpg"
                                alt="TG Group" />
                        </div>
                    </li>
                </ul>
            </nav>

        </section>

        <section class="box">
            <div class="copyright-cells">
                <a class="link"
                    rel="external nofollow"
                    href="https://beian.miit.gov.cn"
                    target="_blank"
                    title="渝ICP备2023000952号-2">渝ICP备2023000952号-2</a>
                <a>Copyright ©2023 波维希</a>
            </div>
        </section>

    </footer>
</template>

<style lang="scss">
.footer {
    font-size: 13px;
    background-color: #fff;
    padding: 20px 0;

    .box {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 20px 50px;
    }

    .footer-left {
        flex-shrink: 0;

        .logo {
            flex-shrink: 0;

            img {
                width: 100px;
                height: auto;
                border-radius: 6px;
            }
        }

    }

    .footer-right {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 50px;

        ul {
            flex-shrink: 0;

            li:first-child {
                font-weight: 600;
                margin-block-end: 20px
            }

            li:not(:first-child) {
                margin-block-start: 10px
            }
        }

        .qrcode-tg {
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border: 1px solid var(--el-border-color);
            border-radius: 6px;
            margin-block-start: 10px;
        }

        .qrcode-tg img {
            width: 100%;
            height: auto
        }
    }

    .copyright-cells {
        display: flex;
        align-items: center;
        margin-block-start: 20px;
        gap: 20px;
        word-break: keep-all;
        color: #808080
    }
}
</style>